import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch,
		NavBotton, Botton, SearhWrapper, SearchInfo, SearchInfoTitle,SearchInfoSwitch, SearchInfoItem, SearchInfoList
 } from './style';
 import { CSSTransition } from 'react-transition-group';
 import { actionTypes } from './store';
 import { actionTypes as loginActionTypes } from '../../page/login/store';

class Header extends Component {
	searchList() {
		const { focused, list, page, totalPage, mouseIn, hanleMouseEnter,handleChangePage, hanleMouseLeave} = this.props;
		const jsList = list.toJS();
		const newList = [];

		if(jsList.length) {
			for (let i = (page - 1) * 10; i < page * 10; i++) {
				newList.push(
					<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
				)
			}
		}
		if(focused || mouseIn) {
		return(
			<SearchInfo 
			onMouseEnter={hanleMouseEnter}
			onMouseLeave={hanleMouseLeave}
			>
				<SearchInfoTitle>
					热门搜索
					<SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
					<i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe857;</i>
					换一批</SearchInfoSwitch>
				</SearchInfoTitle>
				<SearchInfoList>
					{newList}					
				</SearchInfoList>
			</SearchInfo>
		)
	}
	else{
		return null;
		}
	}

	render() {
		const { list} = this.props;
		return (
		<HeaderWrapper>
			<Link to='/'><Logo  /></Link>
			<Nav>
				<NavItem className="left active">首页</NavItem>
				<NavItem className="left">下载App</NavItem>
				{
					this.props.login 
					? <NavItem className="right" onClick={ this.props.logout}>退出</NavItem> 
					: 
					<Link to="/login"><NavItem className="right">登录</NavItem></Link>
				}
				
				<NavItem className="right">
					<i className="iconfont">&#xe636;</i>
				</NavItem>
				<SearhWrapper>
					<CSSTransition
						in={this.props.focused}
						timeout={400}
						classNames="slider"
					>
						<NavSearch className={this.props.focused ? 'focused' : ''} 
						onFocus={() => {this.props.hanleInputFocus(list)}}
						onBlur = {this.props.hanleInputBlur}
					/>
					</CSSTransition>
					<i className={this.props.focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe632;</i>
					{this.searchList()}
				</SearhWrapper>
			</Nav>
			<NavBotton>
				<Link to='/write'>
					<Botton className="writing">
						<i className="iconfont">&#xe615;</i>
						写文章
					</Botton>
				</Link>
				<Botton className="reg">注册</Botton>
			</NavBotton>
			</HeaderWrapper>
		);
	}
}


const mapStateToProps = (state) => {
	return{
		focused: state.getIn(['header', 'focused']),
		list: state.getIn(['header', 'list']),
		page: state.getIn(['header', 'page']),
		mouseIn: state.getIn(['header', 'mouseIn']),
		totalPage: state.getIn(['header', 'totalPage']),
		login: state.getIn(['login', 'login'])
	}
}

const mapDispatchToProps = (dispatch) => {
	return{
		hanleInputFocus(list) {
			(list.size === 0) && dispatch(actionTypes.getList());
			dispatch(actionTypes.searchFocus());
		},
		hanleInputBlur() {
			dispatch(actionTypes.searchBlur());
		},
		hanleMouseEnter() {
			dispatch(actionTypes.mouseEnter());
		},
		hanleMouseLeave() {
			dispatch(actionTypes.mouseLeave());
		},
		logout() {
			dispatch(loginActionTypes.logout())
		}
		,
		handleChangePage(page, totalPage, spin) {
			let originDeg = spin.style.transform.replace(/[^0-9]/ig, '');
			if(originDeg) {
				originDeg = parseInt(originDeg, 10);
			}else{
				originDeg = 0;
			}
			spin.style.transform = 'rotate('+ (originDeg + 360) +'deg)';
			if(page < totalPage){
				dispatch(actionTypes.changePage(page + 1));
			}else{
				dispatch(actionTypes.changePage(1));
			}
			
		}
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);